<template>
  <div>
    <el-bread></el-bread>
    <div class="add">
      <el-button round type="primary" plain @click="addmenu">新增</el-button>
    </div>
    <el-table :data="adminlists" style="width: 100%">
      <el-table-column prop="id" label="序号" width="180" />
      <el-table-column prop="username" label="账号" width="180" />
      <el-table-column prop="rolename" label="角色名称" width="180" />
      <el-table-column prop="status" label="角色状态" width="180">
        <template v-slot="$prop">
          <el-button type="primary" round plain size="small" v-if="$prop.row.status == 1">正常</el-button>
          <el-button v-else type="warning" round plain size="small">禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="角色操作">
        <template v-slot="$prop">
          <el-button type="primary" round plain size="small" @click="edit($prop.row)">修改</el-button>
          <el-button type="warning" round plain size="small" @click="del($prop.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination background :page-size="1" layout="prev, pager, next" :total=Number(totalsnum)
      :current-page="data.page" @current-change="change" />
    <!-- 弹窗 -->
    <v-dialog :info="info" ref="son"></v-dialog>
  </div>
</template>

<script lang="ts" setup>

import { computed, onMounted, reactive, ref } from "vue"
// 组件
import vDialog from "./dialog.vue"
// form ref
import { ElMessage, FormInstance, ElMessageBox } from 'element-plus'
// 引入仓库
import { useStore } from "vuex";
import api from "@/request/api";
// 防误删
import { myConfirm } from '@/components/index'
const store = useStore()
// form ref
const son: any = ref<FormInstance>()
const data = {
  size: 1,
  page: 1
};
// 弹窗状态
const info = reactive({
  isshow: false
})

// 数据
const adminlists = computed(() => store.state.admin.adminlists)
const totalsnum = computed(() => store.state.admin.totalsnum)

// 获取数据
onMounted(() => {
  store.dispatch("admin/getadminlist", data)
  store.dispatch("admin/gettotalsnum")
})

// 事件
// 新增
const addmenu = () => {
  // 弹窗状态
  info.isshow = true
}
// 修改
const edit = (obj: any) => {
  // 弹窗状态
  info.isshow = true
  // 回显数据
  son.value.setInfo(obj)
}
// 删除
const del = (id: any) => {
  myConfirm(() => {
    api.userdelete({ id }).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success(res.msg)
        // 更新页面
        store.dispatch("admin/getadminlist", data)
        store.dispatch("admin/gettotalsnum")
      } else {
        ElMessage.error(res.msg)
      }
    })
  })




}
// 页码
const change = (p: any) => {
  console.log(p);
  data.page = p
  store.dispatch("admin/getadminlist", data)
  store.dispatch("admin/gettotalsnum")
}
</script>

<style lang="scss" scoped>

</style>